<template>
  <el-card shadow="never" class="box-card" v-loading="loading">
    <ForecastNodeUser  :task-id="taskId"/>
  </el-card>
</template>

<script setup>
import {
  reactive,
  ref,
  unref,
  nextTick,
  watch,
  computed,
  onMounted,
} from "vue";
import { useWorkTaskStore } from "@/stores/workTask";
import ForecastNodeUser from "@/components/WorkflowDesign/FlowProcesses/ForecastNodeUser.vue";

const props = defineProps({
  taskId: {
    default: "",
  },
  entityFullName: {
    default: "",
  },
  entityKeyValue: {
    default: "",
  },
});
const loading = ref(false);

const workTaskStore = useWorkTaskStore();


const taskId =ref(props.taskId);

const hasTaskId = computed(() => {
  return props.taskId && props.taskId.length > 0;
  // return true;
});

const load = async (tid) => {
  await nextTick();
  taskId.value = tid;
};


watch(
  () => props,
  () => {
    taskId.value = props.taskId;
    reload();
  },
  {
    deep: true,
  }
);

const reload = async () => {
  if (!hasTaskId) {
    const res = await workTaskStore.getWorkTaskByEntityInfo({
      entityFullName: props.entityFullName,
      entityKeyValue: props.entityKeyValue,
    });
    load(res.id);
  } else {
    load(props.taskId);
  }
};

onMounted(async () => {
  reload();
});
</script>

<style lang="less" scoped>
:deep(.no-header-dialog) {
  padding: 0px !important;

  .el-dialog__header {
    padding: 9px;
    height: 30px;
    text-align: right;
  }

  .el-dialog__body {
    width: 100%;
    height: calc(100vh - 150px);
    padding: 0px !important;
  }
}
.content-box {
  padding: 10px;
  max-height: calc(100vh - 120px);
  overflow-y: auto;
}
</style>
